import React, {PureComponent} from 'react'
import {
    View,
    Text,
    StyleSheet,
    RefreshControl,
    FlatList,
    ActivityIndicator,
    TouchableOpacity,
    Image,
} from 'react-native';
import screen from '../utils/screen';
import Images from "../images/images";


export const RefreshState = {
    Idle: 0,
    HeaderRefreshing: 1,
    FooterRefreshing: 2,
    NoMoreData: 3,
    Failure: 4,
    EmptyData: 5,
}

const DEBUG = false
const log = (text: string) => {DEBUG && console.log(text)}

type Props = {
    refreshState: number,
    onHeaderRefresh: Function,
    onFooterRefresh?: Function,
    data: Array<any>,
    ListHeaderComponent:Function,
    ItemSeparatorComponent:Function,
    listRef?: any,

    footerRefreshingText?: string,
    footerFailureText?: string,
    footerNoMoreDataText?: string,
    footerEmptyDataText?: string,

    footerRefreshingComponent?: any,
    footerFailureComponent?: any,
    footerNoMoreDataComponent?: any,
    footerEmptyDataComponent?: any,
    renderItem: Function,
    footerStyle:object,
}

type State = {

}

class RefreshFlatList extends PureComponent<Props, State> {

    static defaultProps = {
        footerRefreshingText: '数据加载中…',
        footerFailureText: '点击重新加载',
        footerNoMoreDataText: '已加载全部数据',
        footerEmptyDataText: '暂时没有相关数据',
    }


    componentDidUpdate(prevProps: Props, prevState: State) {
        log('[RefreshListView]  RefreshListView componentDidUpdate ' + prevProps.refreshState)
    }

    onHeaderRefresh = () => {
        log('[RefreshListView]  onHeaderRefresh')

        if (this.shouldStartHeaderRefreshing()) {
            log('[RefreshListView]  onHeaderRefresh')
            this.props.onHeaderRefresh(RefreshState.HeaderRefreshing)
        }
    }

    onEndReached = (info: {distanceFromEnd: number}) => {
        log('[RefreshListView]  onEndReached   ' + info.distanceFromEnd)

        if (this.shouldStartFooterRefreshing()) {
            log('[RefreshListView]  onFooterRefresh')
            this.props.onFooterRefresh && this.props.onFooterRefresh(RefreshState.FooterRefreshing)
        }
    }

    shouldStartHeaderRefreshing = () => {
        log('[RefreshListView]  shouldStartHeaderRefreshing')

        if (this.props.refreshState == RefreshState.HeaderRefreshing ||
            this.props.refreshState == RefreshState.FooterRefreshing) {
            return false
        }

        return true
    }

    shouldStartFooterRefreshing = () => {
        log('[RefreshListView]  shouldStartFooterRefreshing')

        let {refreshState, data} = this.props
        if (data.length == 0) {
            return false
        }

        return (refreshState == RefreshState.Idle)
    }

    keyExtractor = (item: any, index: number) => {
        return index.toString()
    }

    render() {
        log('[RefreshListView]  render  refreshState:' + this.props.refreshState)

        let {renderItem, ...rest} = this.props

        return (
            <FlatList
                ListHeaderComponent={this.props.ListHeaderComponent}
                ref={this.props.listRef}
                onEndReached={this.onEndReached}
                onRefresh={this.onHeaderRefresh}
                refreshing={this.props.refreshState == RefreshState.HeaderRefreshing}
                ListFooterComponent={this.renderFooter}
                onEndReachedThreshold={0.1}
                renderItem={renderItem}
                ListEmptyComponent={this.renderEmpty}
                keyExtractor={this.keyExtractor}
                ItemSeparatorComponent={this.props.ItemSeparatorComponent}
                {...rest}
                // refreshControl={
                //     <RefreshControl
                //         refreshing={this.props.refreshState == RefreshState.HeaderRefreshing}
                //         onRefresh={this.onHeaderRefresh.bind(this)}
                //         colors={['#fff', '#fff', '#fff']}
                //         tintColor="#fff"
                //         progressBackgroundColor='#7378a1'
                //         enabled={true}
                //     />
                // }
            />
        )
    }

    renderEmpty() {
        return (
            <View style={{height:500,justifyContent:'center',alignItems: 'center'}}>
                <Image source={Images.wait}
                       resizeMode={'contain'}
                       style={{width:screen.PIXEL_400,height:screen.PIXEL_400}}/>
                <Text style={{color:'#999',fontSize:14,marginTop:screen.PIXEL_20}}>暂时没有数据</Text>
            </View>
        )
    }

    renderFooter = () => {
        let footer = null

        let {
            footerRefreshingText,
            footerFailureText,
            footerNoMoreDataText,
            footerEmptyDataText,

            footerRefreshingComponent,
            footerFailureComponent,
            footerNoMoreDataComponent,
            footerEmptyDataComponent,
        } = this.props

        switch (this.props.refreshState) {
            case RefreshState.Idle:
                footer = (<View style={[styles.footerContainer,this.props.footerStyle]} />)
                break
            case RefreshState.Failure: {
                footer = (
                    <TouchableOpacity onPress={() => {
                        if (this.props.data.length == 0) {
                            this.props.onHeaderRefresh && this.props.onHeaderRefresh(RefreshState.HeaderRefreshing)
                        } else {
                            this.props.onFooterRefresh && this.props.onFooterRefresh(RefreshState.FooterRefreshing)
                        }
                    }}
                    >
                        {footerFailureComponent ? footerFailureComponent : (
                            <View style={styles.footerContainer}>
                                <Text style={styles.footerText}>{footerFailureText}</Text>
                            </View>
                        )}
                    </TouchableOpacity>
                )
                break
            }
            case RefreshState.EmptyData: {
                footer = (
                    <View
                        // onPress={() => {
                        //     this.props.onHeaderRefresh && this.props.onHeaderRefresh(RefreshState.HeaderRefreshing)
                        // }}
                    >
                        {footerEmptyDataComponent ? footerEmptyDataComponent : null}
                    </View>
                )
                break
            }
            case RefreshState.FooterRefreshing: {
                footer = footerRefreshingComponent ? footerRefreshingComponent : (
                    <View style={styles.footerContainer} >
                        <ActivityIndicator size="small" color="#888888" />
                        <Text style={[styles.footerText, {marginLeft: 7}]}>{footerRefreshingText}</Text>
                    </View>
                )
                break
            }
            case RefreshState.NoMoreData: {
                footer = footerNoMoreDataComponent ? footerNoMoreDataComponent : (
                    <View style={styles.footerContainer} >
                        <Text style={styles.footerText}>{footerNoMoreDataText}</Text>
                    </View>
                )
                break
            }
        }

        return footer
    }
}

const styles = StyleSheet.create({
    footerContainer: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        padding: 10,
        height: 44,

    },
    footerText: {
        fontSize: 14,
        color: '#555555'
    }
})

export default RefreshFlatList
